<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <title>反欺诈引擎</title>
    <style>
        body{
            margin: 0;
        }
        .box-card{
            border-bottom: 1px solid rgba(0, 0, 0, .12);
            background-color: #EBEEF5;
        }
        .app-top{
            background-color:#EBEEF5;
            height: 60px;
            line-height: 60px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            border: 1px solid rgba(0, 0, 0, .12);
        }
    </style>
</head>
<body>
<div id="top">
    <el-card class="box-card">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">反欺诈规则策略</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="app">
    <el-row>
        <el-col class="app-top" :span="16" :offset="4" >
            <el-col :span="6" :offset="1"><i class="el-icon-s-data"></i> 数据列表</el-col>
            <el-col :span="6" :offset="11" style="text-align: right;">
                <el-button @click="dialogFormVisible = true">添加</el-button>
            </el-col>
        </el-col>
    </el-row>

    <el-row style="margin-top: 20px">
        <el-col :span="4" :offset="4" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-image th:src="@{static/img/29.png}"></el-image>
        </el-col>
        <el-col :span="11" :offset="1">
            <template>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="异常绑卡策略" name="异地绑卡"></el-tab-pane>
                    <el-tab-pane label="失信风险策略" name="失信风险"></el-tab-pane>
                    <el-tab-pane label="异常贷款策略" name="异常贷款"></el-tab-pane>
                    <el-tab-pane label="流量控制策略" name="流量控制"></el-tab-pane>
                </el-tabs>
            </template>
            <template>
                <el-table :data="tableData" style="width: 100%;height: 550px" border>
                    <el-table-column prop="id" type="selection"></el-table-column>
                    <el-table-column prop="event" label="事件" width="150px"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="250px"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="250px"></el-table-column>
                    <el-table-column label="是否启用" width="80px">
                        <template scope="scope">
                        <el-switch v-model="scope.row.useStatus" @change=change(scope.$index,scope.row)
                                   active-color="#13ce66" inactive-color="#ff4949"></el-switch></template>
                    </el-table-column>
                    <el-table-column label="操作" width="100px"><template scope="scope">
                        <el-button style="float: left; padding: 3px 0" type="text" @click="mod(scope.row)">编辑</el-button>
                        <el-button style="float: left; padding: 3px 0" type="text" @click=del(scope.row.id)>删除</el-button>
                    </template></el-table-column>
                </el-table>
                </el-table>
            </template>
            <template>
                <div class="block">
                    <el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
                            layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
                </div>
            </template>
        </el-col>
    </el-row>


    <el-dialog title="添加数据" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="事件" :label-width="formLabelWidth">
                <el-input v-model="form.event" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-select v-model="form.fraudCategory" placeholder="请选择分类">
                    <el-option label="异常绑卡策略" value="异地绑卡"></el-option>
                    <el-option label="失信风险策略" value="失信风险"></el-option>
                    <el-option label="异常贷款策略" value="异常贷款"></el-option>
                    <el-option label="流量控制策略" value="流量控制"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOrModFraud">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script th:inline="javascript">
    new Vue({
        el:"#top"
    });
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            activeName: "",
            pageSize:10,
            currentPage:1,
            total:0,
            fraudCategory:"异地绑卡",
            //模态框
            dialogFormVisible:false,
            formLabelWidth: '120px',
            form: {
                id:0,
                event: '',
                fraudCategory: '',
                startTime: '',
                endTime: '',
            },

        },
        methods: {
            handleClick(tab, event) {
                this.fraudCategory=tab.name;
                this.getData();
            },
            change(index,row){
                let us = row.useStatus ?0:1;
                axios.put([[@{fraud/statusChange/}]]+row.id+"/"+us).then(res=>{
                    console.info(res.date.msg)
                }).catch(error => {
                    console.log(error);
                })
            },
            getData(){
                axios.get([[@{fraud/findLimit}]],{
                    params:{
                        limit:this.pageSize,
                        offSet:0,
                        pageNum:this.currentPage,
                        sort:"id",
                        sortOrder:"desc",
                        fraudCategory:this.fraudCategory
                    }
                }).then(res=>{
                    this.total = res.data.data.total;
                    this.tableData = res.data.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].useStatus === 0){
                            this.tableData[i].useStatus = true;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.getData();
            },
            del(id){
                axios.delete([[@{fraud/}]]+id).then(res=>{
                    this.getData();
                }).catch(error => {
                    console.log(error);
                })
            },
            addOrModFraud(){
                if(this.form.id == 0){
                    axios({
                        method:"POST",
                        url:[[@{fraud/addFraud}]],
                        data:this.form
                    }).then(res=>{
                        this.form.id=0;
                        this.getData();
                        this.dialogFormVisible = false;
                    }).catch(err=>console.info(err));
                }else {
                    axios({
                        method:"PUT",
                        url:[[@{fraud/modFraud}]],
                        data:this.form
                    }).then(res=>{
                        this.form.id=0;
                        this.getData();
                        this.dialogFormVisible = false;
                    }).catch(err=>console.info(err));
                }
            },
            mod(row){
                this.form.event=row.event;
                this.form.fraudCategory=row.fraudCategory;
                this.form.startTime=row.startTime;
                this.form.endTime=row.endTime;
                this.form.id=row.id;

                this.dialogFormVisible = true;
            }
        },
        created:function () {
            this.getData();
        }
    })
</script>
</html>